<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="style.css">
    <title>Bankist</title>
</head>

<body>
    <!-- 顶部导航栏 -->
    <nav>
        <p class="welcome">Log in to get started</p>

        <img src="logo.png" alt="logo" class="logo">

        <form action="#" class="login">
            <input type="text" placeholder="User" class="login_input login_input--user">

            <input type="text" placeholder="PIN" maxlength="4" class="login_input login_input--pin">

            <button class="login_btn">&rarr;
            </button>
        </form>
    </nav>

    <main class="app">
        <!-- 结余部分 -->
        <div class="balance">
            <div>
                <p class="balance_label">Current balance</p>
                <p class="balance_data">05/03/2032</p>
            </div>

            <div class="balance_value">
                <p>00 000€</p>
            </div>
        </div>

        <!-- 交易流水表 -->
        <div class="movements">
            <div class="movements_row">
                <div class="movements_type movements_type--deposit">2 deposit</div>
                <div class="movements_data">3 day ago</div>
                <div class="movements_value">3 000€</div>
            </div>

            <div class="movements_row">
                <div class="movements_type movements_type--withdrawal">1 withdrawal</div>
                <div class="movements_data">12/10/2020</div>
                <div class="movements_value">-200€</div>
            </div>
        </div>

        <!-- 流水总结 -->
        <div class="summary">
            <p class="summary_label">IN</p>
            <p class="summary_value summary_value--in">0000€</p>
            <p class="summary_label">OUT</p>
            <p class="summary_value summary_value--out">0000€</p>
            <p class="summary_label">INTEREST</p>
            <p class="summary_value summary_value--interest">0000€</p>
            <button class="btn--sort">&downarrow; SORT</button>
        </div>

        <!-- 操作：转移 -->
        <div class="operation operation--transfer">
            <h2>Transfer money</h2>
            <form action="#" class="form form--transfer">
                <input type="text" class="form__input form__input--to">
                <input type="text" class="form__input form__input--amount">
                <button class="form__btn form__btn--transfer">&rarr;</button>
                <label for="" class="form__label">Transfer to</label>
                <label for="" class="form__label">Amount</label>
            </form>
        </div>

        <!-- 操作：借款 -->
        <div class="operation operation--loan">
            <h2>Request loan</h2>
            <form action="#" class="form form--loan">
                <input class="form__input form__input--loan-amount">
                <button class="form__btn form__btn--loan">&rarr;</button>
                <label for="" class="form__label form__label--loan">Amount</label>
            </form>
        </div>

        <!-- 操作：关闭 -->
        <div class="operation operation--close">
            <h2>Close account</h2>
            <form action="#" class="form form--close">
                <input type="text" class="form__input form__input--user" />
                <input type="password" maxlength="6" class="form__input form__input--pin" />
                <button class="form__btn form__btn--close">&rarr;</button>
                <label class="form__label">Confirm user</label>
                <label class="form__label">Confirm PIN</label>
            </form>
        </div>

        <!-- LOGOUT TIMER -->
        <p class="logout-timer">You will be logged out in <span class="timer">05:00</span></p>
    </main>
    <script src="main.js"></script>
</body>

</html>